<template>
	<view>
		<view class="" :style="{ paddingTop: statusH+10 + 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="reLaunch" url="/pages_t/Settings/Settings">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="我的银行卡"></u-icon>
		</navigator>
		<view class="bag">	
			<view class="item"  v-for="i in banklist">
				<view class="son flex-col justify-between">
					<image :src="i.image" mode="widthFix" class="bankbg"></image>
					<view class="cen flex-col justify-between">
						<view class="one flex-col items-start">
							<view class="" style="font-size: 32rpx;color: #FFFFFF;font-weight: bold;">
								{{i.bankname}}
							</view>
							<!-- <view class="" style="font-size: 28rpx;color: rgba(255,255,255,0.7);">
								储蓄卡
							</view> -->
						</view>
						<view class="two">
							{{i.bank_card_number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn flex-center" @click="$msg.Navigoto('/pages_t/Settings/bank/edit')">
			添加银行卡
		</view>

		<u-action-sheet :actions="list" :closeOnClickOverlay="true" @select="selectClick" cancelText="取消"
			@close="show=false" :closeOnClickAction="true" :show="show"></u-action-sheet>
		<image src="@/static/logo.png" mode="widthFix" class="botbg">
	</view>
</template>

<script>
	import config from '@/config';
	// import {
	// 	userBankCard,
	// 	userBankCardDel
	// } from '@/api/user';
	export default {
		data() {
			return {
				statusH: 0,
				navbarH: 0,
				id: '',
				url: '',
				title: '标题',
				list: [{
						id: 1,
						name: '编辑'
					},
					{
						id: 2,
						name: '删除'
					}
				],
				show: false,
				banklist: ''
			}
		},
		onShow() {
			this.getlist()
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.statusH = res.statusBar;
				this.navbarH = res.navbar;
			});
			// this.url = config.http.IMGSERVER
		},
		methods: {
			leftClick() {
				setTimeout(function() {
					uni.reLaunch({
						url: '/views/user/wodeqianbao'
					})
				}, 10);

			},
			huoqu(id) {
				this.show = true
				this.id = id
			},
			getlist() {
				this.$api.my_bank({
				}).then(res=>{
					this.banklist=res.data
				})
			},
			selectClick(index) {
				console.log(index)
				if (index.id == 1) {
					uni.navigateTo({
						url: '/views/user/bank/edit?id=' + this.id
					})
				} else {
					userBankCardDel({
						id: this.id
					}).then((res => {
						if (res.code == 200) {
							this.$msg.msg(res.msg)
							this.getlist()
						} else {
							this.$msg.msg(res.msg)
						}
					}))
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7FBFF;
	}

	.bag {
		margin-bottom: 230rpx;

		.item {
			width: 690rpx;
			margin: 30rpx auto;
			position: relative;

			.son {

				.bankbg {
					width: 686rpx;
					height: 280rpx;
					position: absolute;
					z-index: -1;
				}

				.cen {
					position: relative;
					width: 686rpx;
					height: 280rpx;
					.one {
						    position: absolute;
						    left: 144rpx;
						    top: 60rpx;
					}

					.two {
						position: absolute;
						font-weight: bold;font-size: 52rpx;color: #FFFFFF;
						left: 32rpx;
						bottom: 24rpx;
					}
				}

			}

			.image {
				width: 690rpx;
				height: 250rpx;
			}
		}

	}

	.btn {
		font-weight: bold;
		width: 686rpx;
		height: 100rpx;
		background: #3377FF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 150rpx;
		left: 32rpx;
	}



	.botbg {
		position: absolute;
		bottom: 50rpx;
		width: 750rpx;
	}
</style>